<template>
	<view class="photo">
		<view class="compare">
			<compare-image
			  :beforeImageUrl="image.beforeImg"
			  :afterImageUrl="image.afterImg"
				:target="target"
			  width="600"
			  height="600"
			/>
		</view>
		<view class="imag-type">
			<!-- <view class="img"> -->
			<view
				class="iamge-item"
				v-for="(item, index) in imageList"
				:key="index"
				@click="selectType(item, index)"
			>
				<image
				  :src="item.imgUrl"
				  class="images"
				  mode="aspectFill"
				  data-type="before"
					:class="active === index ? 'active' : '' "
				/>
				<view class="repair" :class="active === index ? 'active1' : '' ">{{ item.title }}</view>
			<!-- </view> -->
			</view>
		</view>
		<view class="photo-btn">
			<button class="btn" @click="uploadImg">上传照片</button>
			
		</view>
		<!-- <view v-if="title == '人像抠图' || title == '清晰度增强'" class="decs">
			温馨提示：上传的图片里面必须包含人物，否则会处理失败，可能会出现空白现象。
		</view> -->
		
		
		
	</view>
</template>
<script>
import compareImage from '@/components/compare.vue'
export default {
	components: { compareImage },
	props: {
		imageList: {
			type: Array,
		},
		image: {
			type: Object,
		},
		active: {
			type: Number,
		},
		target: {
			type: Boolean,
			default: true
		},
		title: {
			type: String,
		}
	},
	data() {
		return {
			// image: {
			// 	beforeImg: beforeImg,
			// 	afterImg: afterImg,
			// }
		}
	},
	methods: {
		uploadImg() {
			this.$emit('uploadImg')
		},
		selectType(item, index) {
			this.$emit('selectType', item, index)
		},
	},
}
</script>
<style lang="scss" scoped>
	.imag-type {
		display: flex;
		justify-content: center;
		align-items: center;
		// width: 600rpx;
		
		.iamge-item {
			margin: 20rpx 10rpx;
			// &:nth-child(n + 2) {
			// 	margin-left: 20rpx;
			// }
			
			.repair {
				font-size: #{$auxiliary-size};
				text-align: center;
				// border: 1px solid red;
				// white-space: nowrap;
				// color: #{$one-title-color};
			}
		}
		.images {
			width: 180rpx;
			height: 180rpx;
			border-radius: 20rpx;
			
		}
	}
	.photo-btn {
		// text-align: center;
		// margin-top: 400rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		.btn {
			background: #ff6005;
			color: #fff;
			border-radius: 50rpx;
			width: 640rpx;
			margin-top: 120rpx;
			// margin: 120rpx auto;
		}
	}
	.active {
		border: 2px solid #ff6005;
	}
	.active1 {
		color: #ff6005;
	}
	.decs {
		color: #ff6005;
		font-size: 28rpx;
		margin-top: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 10rpx;
	}
</style>